<template>
  <!-- 底部弹窗 添加类show 进场动画 移除出场-->
        <div :class="['size-wrapper' ,{show:isShow}]" @touchmove.stop.prevent @click='hideAdd'>
            <!-- 弹窗内容 -->
            <div class="content" @click.stop>
                <div class="top-bar flex-r-b">
                    <span>单价：{{selectData.price}}</span>
                    <span class="close" @click='hideAdd'></span>
                </div>
                <div class="icon flex-r-b">
                    <!-- 加类toCart 动画 -->
                    <div :class="['left', {toCart:toCart}]" ></div>
                    <div class="right flex-c-b" >
                        <p>1件商品</p>
                        <p v-for=" text in selectData.tip" :key='text'>{{text}}</p>
                    </div>
                </div>
                <div class="size-box">
                    <div class="title">规格选择</div>
                    <div class="flex-r-b">
                        <label class="radio-label" v-for="(item,index) in data.data" :key='index'>
                            <input type="radio" name='size' :value='item.id' @change="isSelect(index)" ref='radioItem'/>
                            <span class="size-checked">{{item.size}}</span>
                        </label>                     
                    </div>
                </div>
                <div class="bottom-bar flex-r-b">
                    <div class="cart"><span :class="['count',{scaleCount:toCart}]" v-show='count'>{{count}}</span></div>
                    <div class="btn" @click='addToCart'>加入购物车</div>
                    <div class="btn">立即购买</div>
                </div>
            </div>
        </div>
</template>

<script>
import {mapGetters,mapActions} from 'vuex'
export default {
  components: {},
  props: ['data'],
  data() {
    return {
      isShow: false,
      toCart: false, //添加到购物车动画
      selectData: {},
      // data:{}
    };
  },
  created() {},
  mounted() {
    this.$nextTick(()=>{
    })
  },
  computed: {
    ...mapGetters(['count'])
  },
  methods: {
    ...mapActions(['updateCartList']),
    showAdd(data) {
      this.isShow = true;
      setTimeout(() => {
      this.selectData = this.data.data[0]
        // 等待dom 更新后 才能操作  所以采用异步获取dom
        this.$refs.radioItem[0].checked = true
      }, 20);
    },
    hideAdd: function() {
      console.log("hide");
      this.isShow = false;
    },
    addToCart: function() {
      if (this.toCart) return;
      this.toCart = true;
      setTimeout(
        function() {
          this.isShow = false;
          this.toCart = false;
        }.bind(this),
        1100
      );
      let size1 = this.selectData.size.slice(0,2)
          let data = {
                id: this.selectData.id,
                name: this.data.name,
                size1: `尺寸：${size1}`,
                size2: "含五盘五叉",
                price: this.selectData.price,
                count: 1,
                checked: true,
                url:this.data.url
          }
      this.updateCartList({data,type:0})
    },
    isSelect(index){
      this.selectData = this.data.data[index]
    }
  },
  watch: {}
};
</script>
<style lang="scss" scoped>
@import "../../public/sass/base.scss";
//弹窗
.size-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 99;
  overflow: hidden;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: all 0.5s;
  .content {
    padding: 0.66rem 0.2rem 1rem 0.2rem;
    height: 6.78rem;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: url("../../public/images/index/bj.png") no-repeat;
    background-size: 100% 100%;
    animation: hide 0.5s;
    .top-bar {
      font-family: $f-Bold;
      font-size: 0.26rem;
      color: $c-33;
      font-weight: bold;
      padding: 0 0.28rem 0.2rem 0.1rem;
      .close {
        display: block;
        width: 0.26rem;
        height: 0.26rem;
        background: url("../../public/images/icon/icon_14.png") no-repeat;
        background-size: 100%;
      }
    }
    .icon {
      z-index: 99;
      .left {
        height: 1.7rem;
        width: 3.31rem;
        border-radius: $radius-10;
        background: url("../../public/images/index/img_7.png");
        background-size: 100%;
      }
      .toCart {
        z-index: 9;
        animation: toCart 1s ease-in-out;
      }
      .right {
        height: 1.7rem;
        width: 3.31rem;
        font-family: $f-Regular;
        font-size: 0.24rem;
        color: $c-33;
        padding: 0.1rem 0;
        p {
          padding: 0 0.52rem;
          background-position: left center;
          background-repeat: no-repeat;
          &:nth-child(1) {
            background-image: url("../../public/images/icon/icon_11.png");
            background-size: 0.28rem 0.28rem;
          }
          &:nth-child(2) {
            background-image: url("../../public/images/icon/icon_13.png");
            background-size: 0.22rem 0.3rem;
          }
          &:nth-child(3) {
            background-image: url("../../public/images/icon/icon_12.png");
            background-size: 0.26rem 0.29rem;
          }
        }
      }
    }
    .size-box {
      > div {
        flex-wrap: wrap;
      }
      .title {
        font-family: $f-Bold;
        font-size: 0.26rem;
        color: $c-33;
        font-weight: bold;
        padding: 0.33rem 0;
      }
      .radio-label {
        display: block;
        text-align: center;
        color: $c-33;
        font-size: 0.26rem;
        font-family: $f-Regular;
        margin-bottom: 0.3rem;
        input[type="radio"] {
          position: absolute;
          left: -9999rem;
        }
        .size-checked {
          display: block;
          height: 0.65rem;
          width: 3.35rem;
          background: $c-fa;
          border-radius: 0.32rem;
          line-height: 0.65rem;
        }
        input[type="radio"]:checked + span {
          color: white;
          background: $c-ffba17;
          animation: scaleSize 0.5s;
        }
      }
      .active {
        background: $c-ffba17;
        color: white;
      }
    }

    //添加到购物车
    .bottom-bar {
      left: 0;
      position: absolute;
      width: 100%;
      height: 0.98rem;
      bottom: 0;
      text-align: center;
      font-size: 0.3rem;
      letter-spacing: 0.03rem;
      z-index: 0;
      background: white;
      .cart {
        flex: 1;
        height: 100%;
        position: relative;
        background: url("../../public/images/icon/icon_15.png") no-repeat;
        background-size: 0.56rem 0.48rem;
        background-position: 0.26rem 0.35rem;
        .count {
          position: absolute;
          top: 0.1rem;
          left: 0.55rem;
          padding: 0 0.09rem 0 0.13rem;
          line-height: 0.44rem;
          text-align: center;
          height: 0.44rem;
          min-width: 0.44rem;
          border-radius: 0.22rem;
          background: $c-ffba17;
          color: white;
          font-size: 0.24rem;
        }
      }
      .btn {
        color: $c-ffba17;
        background: $c-fb;
        width: 2.88rem;
        height: 100%;
        line-height: 0.98rem;
        &:nth-child(3) {
          color: white;
          background: $c-ffba17;
        }
      }
    }
  }
}
.show {
  visibility: visible;
  opacity: 1;
  .content {
    // animation: show 8s  ;
    animation: bounce 1s;
  }
}
.scaleCount {
  animation: scaleCount 0.5s 0.7s;
}
@keyframes show {
  0% {
    transform: translate3d(0, 100%, 0);
  }
  50% {
    transform: scale(0.8) translate3d(0, -6%, 0);
  }
  73%,
  83%,
  93% {
    transform: translate3d(0, -3%, 0);
  }
  70%,
  80%,
  90%,
  100% {
    transform: none;
  }
}
@keyframes hide {
  to {
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes bounce {
  0% {
    transform: translate3d(0, 100%, 0);
  }
  50% {
    transform: scale(0.8) translate3d(0, -10%, 0);
    border-radius: 0.1rem;
  }
  73% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -5%, 0);
  }
  83% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -4%, 0);
  }
  93% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -2%, 0);
  }
  70%,
  80%,
  90%,
  100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: none;
  }
}
@keyframes toCart {
  0%,
  100% {
    transform: none;
  }
  15% {
    transform: scale(0.7);
  }
  70% {
    opacity: 1;
    transform: translate3d(-1.2rem, 4.2rem, 0) scale(0.2);
  }
  83% {
    opacity: 0;
    transform: translate3d(-1.3rem, 4.3rem, 0) scale(0.1);
  }
  84% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.5);
  }
  85% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(0.6);
  }
}
@keyframes scaleSize {
  50% {
    transform: scale3d(1.05, 1.05, 1);
  }
}
@keyframes scaleCount {
  50% {
    transform: scale3d(1.5, 1.5, 1);
  }
}
</style>